import React from 'react';
import IScroll from 'iscroll';
import { getIScrollClick } from '../../util';

class NavbarExtend extends React.Component {
  constructor(props) {
    super(props);
    this.getNavbarItems = this.getNavbarItems.bind(this);
    this.onMenuToggle = this.onMenuToggle.bind(this);
  }

  componentDidMount() {
    // 当选中的菜单为子级菜单时，展开父级菜单
    let selectedNode = document.querySelector('.menu-selected');
    if (selectedNode) {
      while (selectedNode.parentNode && selectedNode.parentNode.className != 'menu-extend-navbar') {
        if (selectedNode.parentNode.className == 'menu-sub-ul') {
          selectedNode.parentNode.style.display = 'block';
          selectedNode.parentNode.previousSibling.style.display = 'block';
          selectedNode.parentNode.previousSibling.previousSibling.childNodes[1].className = 'menu-extend';
        }
        selectedNode = selectedNode.parentNode;
      }
    }

    const winHeight = window.innerHeight;
    const ulHeight = this.refs['scroller-ul'].scrollHeight;
    this.refs['wrapper'].style.height = (ulHeight + 100 > winHeight ? winHeight - 100 : ulHeight) + 'px';

    this.iscroll = new IScroll(this.refs['wrapper'], {
      click: getIScrollClick(),
      scrollX: false,
      scrollY: true,
      mouseWheel: true,
      bounce: true
    });
  }

  componentWillUnmount() {
    if (this.iscroll) {
      this.iscroll.destroy();
      this.iscroll = null;
    }
  }

  render() {
    const { data, selected } = this.props;

    return (
      <div className="menu-extend-content">
        <div className="menu-extend-header">
          <div className="menu-extend-header-title">
            <span>门户</span>
          </div>
          <div className="menu-extend-header-close" onClick={this.props.onClose} />
        </div>
        <div ref="wrapper" className="menu-extend-navbar">
          <div ref="scroller">
            <ul ref="scroller-ul" className="menu-ul">
              {this.getNavbarItems(data, selected, 1)}
            </ul>
          </div>
        </div>
      </div>
    );
  }

  getNavbarItems(menus, selected, level) {
    const pl = level * 16;
    const ml = (level - 1) * 16;

    return menus.map(item => {
      const { menuid, menuname } = item;
      if (item.child && item.child.length) {
        return (
          <li key={menuid}>
            <div
              ref={`menu-${menuid}`}
              className="menu-item"
              style={{ paddingLeft: pl + 'px' }}
              onClick={() => this.props.onClick(item)}
              onTouchStart={() => (this.refs[`menu-${menuid}`].style.backgroundColor = '#eee')}
              onTouchEnd={() => (this.refs[`menu-${menuid}`].style.backgroundColor = '#fff')}
            >
              <div className="menu-title">{menuname}</div>
              <div ref={`menu-toggle-${menuid}`} className="menu-close" onClick={e => this.onMenuToggle(e, menuid)} />
              <div className={menuid == selected ? 'menu-selected' : ''} style={{ width: '20px' }} />
            </div>
            <div ref={`menu-divider-${menuid}`} className="menu-divider" style={{ marginLeft: ml + 'px', display: 'none' }} />
            <ul ref={`menu-sub-${menuid}`} className="menu-sub-ul">
              {this.getNavbarItems(item.child, selected, level + 1)}
            </ul>
            <div className="menu-divider" style={{ marginLeft: ml + 'px' }} />
          </li>
        );
      } else {
        return (
          <li
            key={menuid}
            ref={`menu-${menuid}`}
            onClick={() => this.props.onClick(item)}
            onTouchStart={() => (this.refs[`menu-${menuid}`].style.backgroundColor = '#eee')}
            onTouchEnd={() => (this.refs[`menu-${menuid}`].style.backgroundColor = '#fff')}
          >
            <div className="menu-item" style={{ paddingLeft: pl + 'px' }}>
              <div className="menu-title">{menuname}</div>
              <div className={menuid == selected ? 'menu-selected' : ''} />
            </div>
            <div className="menu-divider" style={{ marginLeft: ml + 'px' }} />
          </li>
        );
      }
    });
  }

  onMenuToggle(e, menuid) {
    e.preventDefault && e.preventDefault();
    e.stopPropagation && e.stopPropagation();

    const className = this.refs[`menu-toggle-${menuid}`].className;
    if (className == 'menu-extend') {
      this.refs[`menu-toggle-${menuid}`].className = 'menu-close';
      this.refs[`menu-sub-${menuid}`].style.display = 'none';
      this.refs[`menu-divider-${menuid}`].style.display = 'none';
    } else {
      this.refs[`menu-toggle-${menuid}`].className = 'menu-extend';
      this.refs[`menu-sub-${menuid}`].style.display = 'block';
      this.refs[`menu-divider-${menuid}`].style.display = 'block';
    }

    this.iscroll && this.iscroll.refresh();
  }
}

export default NavbarExtend;
